<template>
  <div style="background-color:#FFFFFF">
    <!-- <h1>出行规划</h1> -->

    <el-row :gutter="20">
      <el-col :span="20">
        <!-- <div class="grid-content bg-purple"> -->
        <el-row :gutter="20">
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <!-- 搜索框 -->
              <el-input placeholder="请输入出发地" v-model="start" clearable>
              </el-input></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-input placeholder="请输入目的地" v-model="end" clearable>
              </el-input></div
          ></el-col>
        </el-row>
        <!-- </div> -->
      </el-col>
      <el-col :span="4"
        ><div class="grid-content bg-purple">
          <el-button
            type="primary"
            @click="search"
            icon="el-icon-search"
            style="width:100%"
            >搜索</el-button
          >
        </div></el-col
      >
    </el-row>

    <el-row :gutter="20">
      <el-col :span="18"
        ><div class="grid-content bg-purple">
          <!-- 高德地图组件 -->
          <div id="container" style="width:100%; height: 750px"></div></div
      ></el-col>
      <el-col :span="6"
        ><div class="grid-content">
          <transition name="el-zoom-in-top">
            <div v-show="notSearched">
              <div class="block">
                <el-timeline>
                  <el-timeline-item timestamp="2021/04/28" placement="top">
                    <el-card shadow="hover">
                      <h4>输入参数不空</h4>
                      <p>出发地与目的地不能为空</p>
                    </el-card>
                  </el-timeline-item>
                  <el-timeline-item timestamp="2021/04/27" placement="top">
                    <el-card shadow="hover">
                      <h4>输入地点关键字尽量精确</h4>
                      <p>当前仅支持模糊搜索，可能导致搜索结果不准确</p>
                    </el-card>
                  </el-timeline-item>
                  <el-timeline-item timestamp="2021/04/26" placement="top">
                    <el-card shadow="hover">
                      <h4>输入路线规范</h4>
                      <p>当前仅支持汽车路线规范（骑行路线等开发中）</p>
                    </el-card>
                  </el-timeline-item>
                  <el-timeline-item timestamp="2021/04/25" placement="top">
                    <el-card shadow="hover">
                      <h4>路线请求上限</h4>
                      <p>每日路线规划请求量有上限，资金有限望见谅</p>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </div>
          </transition>

          <transition name="el-zoom-in-top">
            <!-- 路线规划信息面板 -->
            <div v-show="!notSearched" id="panel" ></div>
          </transition>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      notSearched: true,
      start: "",
      end: "",
      city: "",
      district: "",
      // 详细地址
      formattedAddress: "",
      // 高德地图主对象
      map: null,
      // 驾车规划对象
      driving: null,
      // 城市编码
      citycode: ""
    };
  },
  mounted() {
    // 指向当前vue实例
    var that = this;

    window.onLoad = function() {
      // console.log(that);
      var map = new AMap.Map("container", {
        zoom: 15, //放大级别
        viewMode: "3D", //使用3D视图
        resizeEnable: true
      });
      that.map = map;
      //实时路况图层
      var trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 10
      });
      map.add(trafficLayer); //添加图层到地图
      // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
      map.addControl(new AMap.ToolBar());

      // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
      map.addControl(new AMap.Scale());

      // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
      var geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, //是否使用高精度定位，默认:true
        timeout: 10000, //超过10秒后停止定位，默认：无穷大
        maximumAge: 0, //定位结果缓存0毫秒，默认：0
        convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
        showButton: true, //显示定位按钮，默认：true
        buttonPosition: "LB", //定位按钮停靠位置，默认：'LB'，左下角
        buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
        showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
        panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
        zoomToAccuracy: true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
      });
      map.addControl(geolocation);
      geolocation.getCurrentPosition();
      AMap.event.addListener(geolocation, "complete", onComplete); //返回定位信息
      AMap.event.addListener(geolocation, "error", onError); //返回定位出错信息

      // 定位成功回调
      function onComplete(data) {
        // data是具体的定位信息
        var {
          city,
          district,
          formattedAddress,
          citycode
        } = data.addressComponent;
        that.$message.success("当前位置：" + city + " " + district);
        that.city = city;
        that.district = district;
        that.formattedAddress = formattedAddress;
        that.citycode = citycode;
        // 将citycode传回父组件
        that.$emit("getCityCode", { citycode, city });
        console.log(data);
      }

      // 定位失败回调
      function onError(data) {
        // 定位出错
        that.$message.error("网络状况不佳！");
      }

      //构造路线导航类
      var driving = new AMap.Driving({
        // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
        policy: AMap.DrivingPolicy.LEAST_TIME,
        map: map,
        panel: "panel"
      });
      that.driving = driving;
      that.$notify({
        title: "公示",
        message:
          "本站所使用的地图技术来自高德地图，每日访问量有上限，请善意使用。",
        offset: 100,
        type: "info"
      });
    };

    var key = "26f6dd0d1aa9c919b6f99ac528c5abc9"; // 你的key
    var url = `https://webapi.amap.com/maps?v=1.4.15&key=${key}&callback=onLoad&plugin=AMap.ToolBar,AMap.Geolocation,AMap.Driving,AMap.Scale,AMap.OverView`;
    var jsapi = document.createElement("script");
    jsapi.charset = "utf-8";
    jsapi.src = url;
    document.head.appendChild(jsapi);
  },

  methods: {
    // 搜索
    search() {
      // console.log(this.city);
      // console.log(this.map);
      if (
        this.start == undefined ||
        this.start == null ||
        this.start == "" ||
        this.end == undefined ||
        this.end == null ||
        this.end == ""
      ) {
        this.$message.warning("请保证 出发地 和 目的地 不为空!");
        return;
      }
      // console.log(this.start + "," + this.end);

      // 去除搜索公告
      this.notSearched = false;

      // 出发地、目的地
      var points = [
        { keyword: this.start, city: this.city },
        { keyword: this.end, city: this.city }
      ];

      // this.map
      // 根据关键字规划驾车导航路线
      var that = this;
      this.driving.search(points, function(status, result) {
        // result 即是对应的驾车导航信息
        if (status === "complete") {
          // log.success("绘制驾车路线完成");
          // console.log("绘制驾车路线完成," + result);
          that.$notify({
            title: "提示",
            message: "出行须知，今日有雨，外出记得带伞",
            offset: 100,
            type: "info"
          });
        } else {
          // log.error("获取驾车数据失败：" + result);
          that.$notify({
            title: "出错了",
            message: "系统开小差了，请稍后再试",
            offset: 100,
            type: "error"
          });
        }
      });
    }
  }
};
</script>

<style lang="less">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

// 路线信息面板样式
#panel {
  // position: fixed;
  padding-top: 20px;
  position: relative;
  background-color: white;
  margin-left: 20px;
  max-height: 100%;
  overflow-y: auto;
  top: 10px;
  right: 10px;
  width: 280px;
}
#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
#panel .amap-lib-driving {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
</style>
